<template>
  <a-modal
    v-model:open="isVisible"
    title="节点详情"
    @ok="handleOk"
    @cancel="handleCancel"
    width="80%"
  >
    <a-tabs>
      <a-tab-pane key="processLog" tab="进程日志">
        <a-table :dataSource="processLogs" :columns="processLogColumns" pagination="{false}" />
      </a-tab-pane>
      <a-tab-pane key="runHistory" tab="运行历史">
        <a-table :dataSource="runHistory" :columns="runHistoryColumns" pagination="{false}" />
      </a-tab-pane>
      <a-tab-pane key="alerts" tab="异常告警">
        <a-table :dataSource="alerts" :columns="alertColumns" pagination="{false}" />
      </a-tab-pane>
      <a-tab-pane key="restartRecords" tab="重启/停止记录">
        <a-table
          :dataSource="restartRecords"
          :columns="restartRecordColumns"
          pagination="{false}"
        />
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useI18n } from '@/hooks/web/useI18n';

  const { t } = useI18n();
  const isVisible = ref(false);

  // 示例数据
  const processLogs = ref([
    { id: 1, time: '2023-10-01 10:00', message: '进程启动' },
    { id: 2, time: '2023-10-01 10:05', message: '进程运行中' },
  ]);

  const runHistory = ref([
    { id: 1, time: '2023-10-01 09:00', status: '运行' },
    { id: 2, time: '2023-10-01 10:00', status: '停止' },
  ]);

  const alerts = ref([{ id: 1, time: '2023-10-01 10:02', message: 'CPU使用率过高' }]);

  const restartRecords = ref([{ id: 1, time: '2023-10-01 10:10', action: '重启' }]);

  const processLogColumns = [
    { title: t('sys.device.columns.time'), dataIndex: 'time', key: 'time' },
    { title: '日志信息', dataIndex: 'message', key: 'message' },
  ];

  const runHistoryColumns = [
    { title: t('sys.device.columns.time'), dataIndex: 'time', key: 'time' },
    { title: t('sys.analysis.columns.status'), dataIndex: 'status', key: 'status' },
  ];

  const alertColumns = [
    { title: t('sys.device.columns.time'), dataIndex: 'time', key: 'time' },
    { title: '告警信息', dataIndex: 'message', key: 'message' },
  ];

  const restartRecordColumns = [
    { title: t('sys.device.columns.time'), dataIndex: 'time', key: 'time' },
    { title: '操作记录', dataIndex: 'action', key: 'action' },
  ];

  const handleOk = () => {
    isVisible.value = false;
  };

  const handleCancel = () => {
    isVisible.value = false;
  };

  // 用于打开弹框的函数
  const openModal = () => {
    isVisible.value = true;
  };
</script>

<style scoped>
  /* 添加样式 */
</style>
